<template>
	<div class="great-video-box" v-if="isGreatVideoBox">
		<!--首页精彩视频 -->
		<div class="h-great h-card ">
			<div class="h-t-title h-t-more">
				<div class="h-t-info">
					<div>精彩视频</div>
				</div>
			</div>
			<div class="nav-table">
				<ul class="parentClassUl">
					<!--<li class="parentClassLi" :class="[curParentClassAll]" @click.stop="clickParentMenu('')">
						<p>全部</p>
					</li>-->
					<li class="parentClassLi" :class="[isParentCurClass==v.id?'curParentClass':'']" v-for="v in dataMenuArray" key="v.id" @click.stop.prevent="clickParentMenu(v,vIndex)">
						<p>{{v.title}}</p>
						<!--<p>{{v.tagName+v.id}}</p>-->
						<div class="nav-er-table" v-if="isParentCurClass==v.id">
							<ul class="childenClassUl">
								<li class="childenClassLi" :class="[curChildClass==w.id?'curChildClass':'']" v-for="(w,wIndex) in v.children" @click.stop.prevent="clickChildMenu(w.id)">{{w.title}}</li>
							</ul>
						</div>
					</li>
				</ul>
				<!--<div class="select-nav-table">
					<div class="select-nav-table-img" @click="linkSenMenu()"></div>
				</div>-->
				<div class="select-right" @click="clickSelectRight">
					<p>{{selectLeft}}</p>
					<Iconfont iconClass="iconfont iconyoujiantou1" />
				</div>
				<div class="select-right-down" v-if="isSelectRight">
					<ul>
						<li :class="[curLeftSelectNum==index?'curLeftSelect':'']" @click="clickSelectOption(v,index)" v-for="(v,index) in tabsParam">{{v.value}}</li>
					</ul>
				</div>
			</div>
		</div>
		<div :class="[greadVideoBox]">
			<div class="no-video" v-if="isNoVideo"></div>
			<ul class="h-great-list">
			    <li v-for="v in greatVideoArray" @click="clickPushLookBackPage(v)" >
			    	<img :src="v.imagUrl+'?x-oss-process=image/resize,m_fixed,h_187,w_329'" v-on:click.self.prevent/>
			    	 <p>{{v.title}}</p>
			    </li>
			  </ul>
			  <div class="more-video-box" @click="clickMoreGreatPage" v-if="greatVideoArray.length>4">
			    <p>查看更多</p><Iconfont iconClass="iconfont iconyoujiantou" />
		     </div>
		</div>
		
	</div>
</template>

<script>
	import { data } from '../../store/dataList'
	export default {
		data() {
			return {
				selectLeft: '按最新',
				curLeftSelectNum:0,
				isSelectRight:false,//左边下拉框显示不显示
				
				
				cateType:'',//要传的标签id
				selText:'',//要传的最新最热
				parId:'',//父级的id
				
				
				dataMenuArray: [], //菜单数组
				isParentCurClass: '', //父选中状态
				curChildClass:'',
				tabsParam: [{
						value: '按最新',
						type: ''
					},
					{
						value: '按最热',
						type: 'pv'
					}
				],
				greatVideoArray:[],//精彩视频列表
				isGreatMore:false,//
				greadVideoBox:'gread-video-box',
				isNoVideo:false,//有无视频
				isGreatVideoBox:false,//精彩视频显示不显示
			}
		},
		created() {
			//this.getMenuData()
            //this.getHomeVideo('','','')
            this.getAllMenuHomeVideoData()
		},
		mounted() {
          //console.log(this.$channel)
		},
		methods: {
			clickParentMenu(v, vIndex) { //点击父菜单
				this.greatVideoArray = []; //数组清空
				if(v.id) { //id有值
					this.isParentCurClass = v.id;					
					this.defaultState = true;
					if(v.children.length) { //有子集 
						this.parId = v.id;						
						if(v.children[0].id){
							this.cateType = v.children[0].id;
						}else{
							this.cateType = ''
						}
						//console.log(this.cateType)
						this.curChildClass = v.children[0].id;
						this.greadVideoBox= 'gread-video-box-long';
					} else {//没有子集
						this.parId = v.id;
						this.cateType = '';
						this.greadVideoBox= 'gread-video-box';
					}
				} else { ///点击全部
					this.isParentCurClass = '';
					this.parId = '';
					this.cateType = '';
					this.defaultState = false;
					this.greadVideoBox= 'gread-video-box';
				}
				this.getHomeVideoData(this.selText,this.parId, this.cateType); //sel  cateType
			},
			clickChildMenu(id) {
				this.greatVideoArray = []; //数组清空
				if(id){//不是全部
				  this.dataMenuArray.map((item)=>{
						item.children.map((list)=>{
							if(id==list.id){
							   this.parId  = item.id
							}
						})
					})
				   this.cateType = id;
				   this.getHomeVideoData(this.selText,this.parId, this.cateType); //sel  cateType
				}else{//是全部
					 this.cateType= '';
					 this.getHomeVideoData(this.selText,this.parId, this.cateType); //sel  cateType
				}								
				this.curChildClass = id;
			},
			clickSelectRight(){//点击右边下拉框
				this.isSelectRight = !this.isSelectRight;//取反
			},
			clickSelectOption(v,index){//点击右边的选项
				this.greatVideoArray = [];//数组清空
				this.selectLeft = v.value;
				this.curLeftSelectNum = index;
				this.selText = v.type;
				this.isSelectRight = false;
				this.getHomeVideoData(this.selText,this.parId, this.cateType); //sel  cateType
			},
			getAllMenuHomeVideoData(){
				let _this = this;
				_this.$http.all([_this.getMenuData(),_this.getHomeVideo('','','')]).then(_this.$http.spread(function(res,res1){
					if(res.data.code == "000000") {//菜单
							if(res.data.data.length) { //有值
								//this.dataMenuArray = res.data.data;
								let firstAll = [{
									"id":"","title":"全部","creator":"","channel":"","parentId":0,"children":[]
								}]
								_this.dataMenuArray = [...firstAll,...res.data.data];
								window.sessionStorage.setItem(_this.$channel+'homeGreatData',JSON.stringify(res.data.data))
							} else { //无值 不显示按钮
								_this.greadVideoBox = 'gread-video-box-long'
							}
					}
					
					if(res1.data.code == "000000") {//视频列表
							//console.log(res.data.data)
							if(res1.data.data.length) { //有值
								_this.isNoVideo = false;
								_this.greatVideoArray = res1.data.data;								
							} else { //无值 不显示按钮
								_this.isNoVideo = true
							}
					}
					 if(res.data.data.length=='0' && res1.data.data.length=='0'){
					 	_this.isGreatVideoBox = false
					 }else{
					 	_this.isGreatVideoBox =true;
					 }
				}))
			},
			getMenuData() { //头部列表数据
				return this.$http.get("/h5live/getHomeVideoType")				
			},
			//请求视频列表
			getHomeVideo(sel,pType,cateType){//sel  空是最新  pv是最热  cateType标签id  空位全部
				if(pType==null){
					pType==''
				}
				if(cateType==null){
					cateType==''
				}
				return this.$http.get("/h5live/getHomeVideoTop",{
						params: {
						sel: sel,
					    pType:pType,//父级分类
						cateType:cateType
					}
				})
			},
			//请求视频列表
			getHomeVideoData(sel,pType,cateType){//sel  空是最新  pv是最热  cateType标签id  空位全部
				if(pType==null){
					pType==''
				}
				if(cateType==null){
					cateType==''
				}
					this.$http.get("/h5live/getHomeVideoTop",{
						params: {
						sel: sel,
					    pType:pType,//父级分类
						cateType:cateType
					}
					})
					.then(res => {
						if(res.data.code == "000000") {
							//console.log(res.data.data)
							if(res.data.data.length) { //有值
								this.isNoVideo = false;
								this.greatVideoArray = res.data.data;								
							} else { //无值 不显示按钮
								this.isNoVideo = true
							}
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			clickMoreGreatPage(){//跳转更多
				this.$router.push({
					path: `/${this.$channel}/geratMoreVideo`,
					query: {
						//tabNum: this.nowIndex
						sel:this.selText,
						parId:this.parId,//父级id
						cateType:this.cateType//要传的id
					
					}
				});
			},
			clickPushLookBackPage(v){//跳转到回看页面
				this.$router.push(`/${this.$channel}/lookBack_particulars/${v.id}`);
			}
		},
	}
</script>

<style scoped="scoped">
	::-webkit-scrollbar {
	  height: 0;
	  width: 0;
	  color: transparent;
	   display: none;
	}
	.gread-video-box{
		width: 100vw;
		padding: 0  30px;
		height: 1156px;
		background: white;
	}
	.gread-video-box-long {
		width: 100vw;
		height: 1156px;
		margin-top: 50px;
		padding-bottom: 30px;
		width: 100vw;
		padding: 0  30px;
	}
	.curParentClass {
		color: #539e8a !important;
	}
	.curChildClass{
		color: white !important;
		background:#539e8a !important;
		border: 1px solid #539e8a !important;
	}
	.curLeftSelect {
		color: #539e8a !important;
	}
	
	.h-great-tab ul {
		width: 750px;
		/*height: 60px;*/
		white-space: nowrap;
		overflow-x: scroll;
		margin-top: 15px;
		padding-right: 120px;
		/*margin-left: 45px;*/
		/* padding:  30px 120px 20px  30px;*/
	}
	
	.h-great-tab ul li {
		display: inline-block;
		margin-right: 45px;
		/*border-bottom: 4px solid #FF3B30;*/
		line-height: 45px;
		font-size: 28px;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: relative;
	}
	
	.h-great-tab ul li:first-child {
		margin-left: 45px;
	}
	
	.select-right-down {
		width: 115px;
		height: 120px;
		position: absolute;
		top: 70px;
		right: 30px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.18);
		border-radius: 8px;
	}
	
	.select-right-down ul li {
		width: 85px;
		height: 62px;
		font-size: 22px;
		font-weight: 300;
		color: #666666;
		text-align: center;
		line-height: 60px;
		margin: 0 auto;
	}
	
	.select-right-down ul li:first-child {
		border-bottom: 2px solid #F3F3F3;
	}
	
	.iconyoujiantou1 {
		transform: rotate(90deg);
		color:#539e8a ;
	}
	
	.first-menu-box {
		position: relative;
	}
	
	.select-right {
		position: absolute;
		top: 0;
		right: 0px;
	}
	
	.great-video-box {
		width: 100vw;
		height: auto;
		background: white;
				position: relative;
		/*margin-top: 10px;*/
	}
	
	.h-card {
		background: #fff;
		/*box-shadow: 0px 2px 5px 0px rgba(155, 155, 155, 0.05);*/
		padding-top: 20px;
	}
	
	.h-t-title.h-t-more {
		width: 670px;
	}
	
	.h-t-title {
		align-items: center;
		width: 670px;
		margin-left: 50px;
		position: relative;
	}
	
	.h-t-info {
		font-size: 36px;
		color: #181818;
		font-weight: bold;
		padding-left: 26px;
		display: flex;
		flex: 1;
		justify-content: space-between;
		position: relative;
		height: 44px;
		vertical-align: middle;
		line-height: 50px;
	}
	
	.h-t-info::after {
		content: "";
		display: block;
		position: absolute;
		transform-origin: 0 0;
		width: 5px;
		top: 0;
		left: 0;
		height: 44px;
		transform-origin: left 0;
		background: red;
		background: #539e8a;
		border-radius: 3px;
	}
	
	.h-t-info>div {
		font-weight: bold;
		vertical-align: middle;
		line-height: 50px;
	}
	
	.h-great-tab {
		width: 100vw;
		height: 80px;
		background: pink;
		padding: 0 30px 0 0;
		display: flex;
		margin-top: 20px;
	}
	
	.select-right {
		width: 165px;
		height: 80px;
		background-size: 145px 80px;
		padding: 0 30px 0 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		top: 0px;
		right: 0px;
		background: white;
	}
	
	.select-right p {
		font-size: 22px;
		color:#539e8a;
		margin-right: 15px;
		line-height: 40px;
	/*	border-left: 2px solid black;*/
		padding:  0  0  0 20px ;
		background: url(../../assets/images/homePv.png) no-repeat;
		background-size: 165px 40px;
	}
	
	.curParentClass p {
		border-bottom: 4px solid #539e8a;
	}
	
	.nav-table {
		position: relative;
		margin-top: 20px;
	}
	
	.parentClassUl {
		width: 750px;
		white-space: nowrap;
		overflow-x: scroll;
		padding: 10px 130px 10px 45px;
		/* -webkit-overflow-scrolling: touch;*/
		background: white;
	}
	
	.parentClassLi {
		display: inline-block;
		margin-right: 36px;
		font-size: 28px;
	}
	
	.parentClassLi p {
		padding: 15px 10px;
		/*background: darkgoldenrod;*/
	}
	
	.nav-er-table {
		position: absolute;
		top: 82px;
		left: 30px;
		/*background: forestgreen;*/
	}
	
	.childenClassUl {
		width: 720px;
		white-space: nowrap;
		overflow-x: scroll;
		padding: 0 30px 0 0;
		font-size: 24px;
	}
	
	.childenClassLi {
		display: inline-block;
		background: white;
		margin-right: 20px;
		border-radius: 20px;
		border: 1px solid #B3B3B3;
		padding: 0 10px;
		height: 40px;
		line-height: 42px;
		text-align: center;
		padding: 0 22px;
		color: #B3B3B3;
	}
	.h-great-list {
		width: 690px;
	  display: flex;
	  display: -webkit-flex;
	  flex-wrap: wrap;
	  -webkit-flex-wrap: wrap;
	  padding-bottom: 20px;
	}

.h-great-list li {
  width:329px;
  margin-top: 22px;
  background: rgba(255, 255, 255, 1);
}

.h-great-list li:nth-child(even) {
  margin-left: 30px;
}

.h-great-list li img {
  width: 100%;
  height: 187px;
  border-radius: 12px;
}
.h-great-list li p {
  width: 100%;
  margin-top: 10px;
  text-align: left;
  line-height: 40px;
 vertical-align: middle;
  font-size: 26px;
 text-align: justify;
  color: #333333;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
 
}

.h-great-list-info {
  padding: 0 10px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-flex-align-items: center;
}

.h-great-list-info i {
  font-size: 42px;
}

.h-great-list-info span {
  color: #000;
  font-size: 26px;
   height: 42px;
  line-height: 38px;
}
.more-video-box{
	width:150px;
	height:45px;
	background:rgba(242,242,242,1);
	border-radius:23px;
	margin: 0 auto;
	text-align: center;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #666666;
	margin-bottom: 50px;
}
.iconyoujiantou {
		transform: rotate(0deg);
		margin-left: 5px;
	}
	.no-video{
		width: 100%;
		height: 470px;
		background: url(../../assets/images/no-video.png) no-repeat;
		background-size: 750px 470px;
		position: absolute;
		top: 350px;
		left: 0;
	}
</style>